<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-[10px]">
        <el-card shadow="hover">
          <div class="df">
            <el-button type="primary" icon="Back" text @click="handleBack">返回</el-button>
            <div class="df-item">
              <span class="df-item-label">文件名: </span>
              <span class="df-item-value">{{ route.query.name }}</span>
            </div>
            <!-- <div class="df-item">
              <span class="df-item-label">生成时间: </span>
              <span class="df-item-value">2024.06.07</span>
            </div> -->
          </div>
        </el-card>
      </div>
    </transition>
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <base-form
            :rule-form-config="ruleFormConfig"
            :rule-form-props="ruleFormProps"
            :rul-form-model="queryParams"
            :show-search="true"
            @handle-query="handleQuery"
            @reset-query="resetQuery"
          >
          </base-form>
        </el-card>
      </div>
    </transition>
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-[10px]">
        <el-card shadow="hover">
          <template #header>
            <div>
              <el-button type="primary" plain @click="exportData">导出</el-button>
            </div>
          </template>
          <base-table v-loading="tableLoading" :table-headers="tableHeaders" :table-data="tableData" :table-props="tableProps">
            <template #handle="scope">
              <el-tooltip content="编辑" placement="top">
                <el-button v-hasPermi="['system:menu:edit']" link type="primary" icon="Edit" @click="handleEdit(scope.data.row)" />
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button v-hasPermi="['system:menu:edit']" link type="danger" icon="Delete" @click="handleDelete(scope.data.row)" />
              </el-tooltip>
            </template>
          </base-table>
          <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="initData"
          />
        </el-card>
      </div>
    </transition>
    <DetailEditDialog v-if="editDialogVisible" :dataId="route.query.id" :datas="editDatas" @on-close="handleEditClose" @on-sure="initData" />
  </div>
</template>

<script setup name="strengthModelDetailList" lang="ts">
import DetailEditDialog from '@/views/bomCompareTool/strengthModelList/detailEditDialog.vue';
import { getStrengthDetailList, downloadData, deleteStrengthDetail } from '@/api/bomCompareTool/strengthModelList/index';
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const ruleFormConfig = reactive([
  {
    prop: 'level',
    type: 'BaseInput',
    formItemProps: {
      label: '层次'
    },
    props: {
      disabled: false,
      clearable: false
    }
  },
  {
    prop: 'name',
    type: 'BaseInput',
    formItemProps: {
      label: '名称'
    },
    props: {
      disabled: false,
      clearable: false
    }
  },
  {
    prop: 'version',
    type: 'BaseInput',
    formItemProps: {
      label: '版次'
    },
    props: {
      disabled: false,
      clearable: false
    }
  }
]);
const ruleFormProps = reactive({
  inline: true
});
const tableLoading = ref(false);
const showSearch = ref(true);
const editDialogVisible = ref(false);
const editDatas = ref(null);
const queryParams = reactive({
  groupType: route.query.groupType,
  track: route.query.track,
  aircraftModel: route.query.model,
  level: '',
  name: '',
  version: '',
  pageNum: 1,
  pageSize: 10
});
const total = ref(0);
const tableData = ref([]);
// 表格配置
const tableHeaders = reactive<any>([
  {
    columnProps: { prop: 'level', label: '层级' }
  },
  {
    columnProps: { prop: 'code', label: '图号' }
  },
  {
    columnProps: { prop: 'name', label: '名称' }
  },
  {
    columnProps: { prop: 'A', label: 'A' }
  },
  {
    columnProps: { prop: 'B', label: 'B' }
  },
  {
    columnProps: { prop: 'C', label: 'C' }
  },
  {
    columnProps: { prop: 'D', label: 'D' }
  },
  {
    columnProps: { prop: 'E', label: 'E' }
  },
  {
    columnProps: { prop: 'F', label: 'F' }
  },
  {
    columnProps: { prop: 'G', label: 'G' }
  },
  {
    columnProps: { prop: 'H', label: 'H' }
  },
  {
    columnProps: { prop: 'J', label: 'J' }
  },
  {
    columnProps: { prop: 'handle', label: '操作', width: '180px', fixed: 'right' },
    showColumnSlot: true,
    columnSlotName: 'handle'
  }
]);
// let tableHeaders = reactive<any>([]);
// 搜索
const handleQuery = () => {
  queryParams.pageNum = 1;
  initData();
};
// 重置
const resetQuery = () => {
  queryParams.name = '';
  queryParams.level = '';
  queryParams.version = '';
  handleQuery();
};
const tableProps = {
  style: {
    width: '100%'
  }
};
const initData = async () => {
  tableLoading.value = true;
  const res = await getStrengthDetailList(queryParams);
  const arr = res.rows.map((item) => item.version);
  // const uniqueArr = Array.from(new Set(arr))
  //   .sort()
  //   .map((item) => {
  //     return {
  //       columnProps: { prop: item, label: item }
  //     };
  //   });
  // tableHeaders = [...tableBaiscHeaders, ...uniqueArr];
  tableData.value = res.rows.map((item) => {
    item[item.version] = 1;
    return item;
  });
  console.log(tableData, tableHeaders);
  total.value = res.total;
  tableLoading.value = false;
};
const downloadFile = (res, fileName?) => {
  const blob = new Blob([res]);
  const objUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.setAttribute('href', objUrl);
  link.setAttribute('download', fileName);
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};
// 下载文件
const exportData = () => {
  const obj = {
    aircraftModel: route.query.model,
    ids: [route.query.id]
  };
  downloadData(obj).then((res) => {
    const contentDisposition = res.headers['content-disposition'];
    if (contentDisposition) {
      // 使用正则表达式提取filename（注意：这里的正则需要根据实际Content-Disposition的格式进行调整）
      const filename = contentDisposition.match(/filename="?([^"]+)"?/)[1];
      const fileName = decodeURIComponent(filename);
      downloadFile(res.data, fileName);
    }
  });
};
const handleBack = () => {
  router.go(-1);
};
const handleEdit = (row) => {
  editDatas.value = row;
  editDialogVisible.value = true;
};
const handleDelete = async (row) => {
  await proxy?.$modal.confirm('是否确认删除该数据');
  await deleteStrengthDetail(route.query.model, route.query.id, [row.id]);
  initData();
  proxy?.$modal.msgSuccess('删除成功');
};
const handleEditClose = () => {
  editDialogVisible.value = false;
};
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.df {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  &-item {
    padding-right: 8px;
  }
}
</style>
